import React, { useState, useRef, useEffect } from 'react';
import { Editor, EditorState, RichUtils } from 'draft-js';
import 'draft-js/dist/Draft.css';
import './RichTextEditor.css';
import { 
  FaBold, 
  FaItalic, 
  FaUnderline, 
  FaHeading, 
  FaListUl, 
  FaListOl,
  FaSave
} from 'react-icons/fa';

function RichTextEditor({ onSave }) {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());
  const editorRef = useRef(null);

  useEffect(() => {
    if (editorRef.current) {
      editorRef.current.focus();
    }
  }, []);

  const handleChange = (newEditorState) => {
    setEditorState(newEditorState);
  };

  const handleKeyCommand = (command, editorState) => {
    const newState = RichUtils.handleKeyCommand(editorState, command);
    if (newState) {
      handleChange(newState);
      return 'handled';
    }
    return 'not-handled';
  };

  const toggleInlineStyle = (inlineStyle) => {
    handleChange(RichUtils.toggleInlineStyle(editorState, inlineStyle));
  };

  const toggleBlockType = (blockType) => {
    handleChange(RichUtils.toggleBlockType(editorState, blockType));
  };

  const handleSave = () => {
    const contentState = editorState.getCurrentContent();
    const content = JSON.stringify(contentState.toJSON());
    onSave(content);
  };

  const focusEditor = () => {
    if (editorRef.current) {
      editorRef.current.focus();
    }
  };

  // 检查当前是否激活了某样式
  const currentStyle = editorState.getCurrentInlineStyle();
  const selection = editorState.getSelection();
  const blockType = editorState
    .getCurrentContent()
    .getBlockForKey(selection.getStartKey())
    .getType();

  return (
    <div className="rich-text-editor">
      <div className="editor-toolbar">
        <button 
          className={`toolbar-btn ${currentStyle.has('BOLD') ? 'active' : ''}`}
          onClick={() => toggleInlineStyle('BOLD')}
          title="加粗"
        >
          <FaBold />
        </button>
        
        <button 
          className={`toolbar-btn ${currentStyle.has('ITALIC') ? 'active' : ''}`}
          onClick={() => toggleInlineStyle('ITALIC')}
          title="斜体"
        >
          <FaItalic />
        </button>
        
        <button 
          className={`toolbar-btn ${currentStyle.has('UNDERLINE') ? 'active' : ''}`}
          onClick={() => toggleInlineStyle('UNDERLINE')}
          title="下划线"
        >
          <FaUnderline />
        </button>
        
        <div className="toolbar-divider"></div>
        
        <button 
          className={`toolbar-btn ${blockType === 'header-one' ? 'active' : ''}`}
          onClick={() => toggleBlockType('header-one')}
          title="标题1"
        >
          <span>H1</span>
        </button>
        
        <button 
          className={`toolbar-btn ${blockType === 'header-two' ? 'active' : ''}`}
          onClick={() => toggleBlockType('header-two')}
          title="标题2"
        >
          <span>H2</span>
        </button>
        
        <div className="toolbar-divider"></div>
        
        <button 
          className={`toolbar-btn ${blockType === 'unordered-list-item' ? 'active' : ''}`}
          onClick={() => toggleBlockType('unordered-list-item')}
          title="无序列表"
        >
          <FaListUl />
        </button>
        
        <button 
          className={`toolbar-btn ${blockType === 'ordered-list-item' ? 'active' : ''}`}
          onClick={() => toggleBlockType('ordered-list-item')}
          title="有序列表"
        >
          <FaListOl />
        </button>
        
        <div className="toolbar-divider"></div>
        
        <button 
          className="toolbar-btn save-btn"
          onClick={handleSave}
          title="保存"
        >
          <FaSave />
          <span>保存</span>
        </button>
      </div>
      
      <div className="editor-container" onClick={focusEditor}>
        <Editor
          ref={editorRef}
          editorState={editorState}
          onChange={handleChange}
          handleKeyCommand={handleKeyCommand}
          placeholder="开始编辑..."
        />
      </div>
    </div>
  );
}

export default RichTextEditor;